<template>
  <div class="dashboard-container">
    <div class="dashboard-editor-container">
      <el-row :gutter="18">
        <el-col v-for="item in videoList" :key="item.id" :xs="12" :sm="12" :lg="8">
          <el-card>
            <vueMiniPlayer ref="vueMiniPlayer" :video="item" :mutex="true" @fullscreen="handleFullscreen" />
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>

import 'vue-mini-player/lib/vue-mini-player.css'
export default {
  data() {
    return {
      videoList: [{
        url: 'https://api.dogecloud.com/player/get.mp4?vcode=5ac682e6f8231991&userId=17&ext=.mp4',
        // 视频海报
        // cover: 'https://i.loli.net/2019/06/06/5cf8c5d9c57b510947.png',
        muted: false, // 是否静音播放
        loop: false, // 视频是否循环播放
        preload: 'auto', // 视频预加载
        poster: '', // 原生视频默认海报暂不设置
        volume: 1, // 默认音量
        autoplay: false // 视频自动播放
      },
      {
        url: process.env.VUE_APP_BASE_API + 'file/视频/QQ视频20220614155927-20220718040225638.mp4',
        // 视频海报
        // cover: 'https://i.loli.net/2019/06/06/5cf8c5d9c57b510947.png',
        muted: false, // 是否静音播放
        loop: false, // 视频是否循环播放
        preload: 'auto', // 视频预加载
        poster: '', // 原生视频默认海报暂不设置
        volume: 1, // 默认音量
        autoplay: false // 视频自动播放
      }, {
        url: 'https://api.bilibili.com/x/click-interface/web/heartbeat',
        // 视频海报
        // cover: 'https://i.loli.net/2019/06/06/5cf8c5d9c57b510947.png',
        muted: false, // 是否静音播放
        loop: false, // 视频是否循环播放
        preload: 'auto', // 视频预加载
        poster: '', // 原生视频默认海报暂不设置
        volume: 1, // 默认音量
        autoplay: false // 视频自动播放
      }
      ],
      video: {
        // 视频播放源

      }
    }
  },
  methods: {
    handleFullscreen() {

    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  .dashboard-editor-container {
    position: relative;
    .chart-wrapper {
      background: #fff;
      padding: 16px 16px 0;
      margin-bottom: 32px;
    }

  }
    @media (max-width:1024px) {
    .chart-wrapper {
      padding: 8px;
    }
  }
  </style>
